<template>
	<div class="wrapper">

		<!------header部分------>
		<div class="header">
		    <img src="../assets/2.png" v-show="!islogin && !isBusinessLogin">
		    <div v-show="islogin || isBusinessLogin">
		        <div v-if="user">
		            <img :src="user.userImg" />
		        </div>
		        <!-- 可以添加商家的显示逻辑 -->
		        <div v-if="business">
		            <img :src="business.businessImg" /> 
		        </div>
		    </div>
		    <!-- 登录和注册链接 -->
		    <div class="login">
		        <div class="box" v-show="!islogin && !isBusinessLogin">
		            <div class="line">
		                <h2 @click="tologin">登录</h2>
		                <h2>/</h2>
		                <h2 @click="toregister">注册</h2>
		            </div>
		        </div>
		        <div class="box" v-show="islogin || isBusinessLogin">
		            <div v-if="user">
		                <h2>{{ user.userName }}</h2>
		            </div>
		            <div v-if="business">
		                <h4>{{ business.businessName }}</h4>
		            </div>
		            <div v-if="!isBusinessLoggedIn" class="line">
		                <p>我的收藏</p>
		                <p @click="toaddress()">收货地址</p>
		            </div>
		        </div>
		    </div>
		   
		</div>

		<!------吃货豆部分------>
		<div v-if="!isBusinessLoggedIn" class="bean">
			<img src="../assets/vip.jpg" />
			<div class="info">
				<h2>青铜会员</h2>
				<p></p>
			</div>
			<div class="raise">
				<button>升级会员 &#62;</button>
			</div>
		</div>

		<!------详细列表部分------>
		<ul class="information">

			<div class="money">
				<li v-if="!isBusinessLoggedIn">
					<div class="savemoney" @click="toPointsdetails">
						<img src="../assets/points.jpg">
						<p>积分明细</p>
						<span>&#62;</span>
					</div>
				</li>

				<li v-if="!isBusinessLoggedIn" @click="toWallet">
					<div class="red">
						<img src="../assets/money.jpg">
						<p>我的钱包</p>
						<span>&#62;</span>
					</div>
				</li>
			</div>

			<li v-if="!isBusinessLoggedIn">
				<div class="address">
					<img @click="toaddress()" src="../assets/收货地址.png">
					<p @click="toaddress()">收货地址</p>
					<span @click="toaddress()">&#62;</span>
				</div>
			</li>

			<li v-if="!isBusinessLoggedIn">
				<div class="favourite">
					<img src="../assets/10014.png">
					<p>我的收藏</p>
					<span>&#62;</span>
				</div>
			</li>
			
			<!-- 骑手选项 -->
			<li v-if="!isBusinessLoggedIn && islogin">
				<div class="rider" @click="handleRiderClick">
					<img src="../assets/rider.png"> <!-- 你需要准备这个图标 -->
					<p>{{ user.isRider == 1 ? '骑手接单' : '成为骑手' }}</p>
					<span>&#62;</span>
				</div>
			</li>
			
			<li v-if="isBusinessLoggedIn">
			        <div class="my-menu" @click="toFoodAdmin">
						<img src="../assets/10002.png">
			            <p>管理食品</p>
			            <span>&#62;</span>
			        </div>
			</li>
			<div class="cooperate">
				<li>
					<div class="judgement">
						<img src="../assets/点赞.jpg">
						<p>在线评分</p>
						<span>&#62;</span>
					</div>
				</li>

				<li>
					<div class="onlinehelp">
						<img src="../assets/吃货豆.png">
						<p @click="topointsshop()">积分商城</p>
						<span @click="topointsshop()">&#62;</span>
					</div>
				</li>
			</div>
		</ul>
		
		<div class="quit">
			<p @click="toquit()">退出当前账号</p>
		</div>

		<Footer></Footer>
		
		<!-- 成为骑手确认弹窗 -->
		<div v-if="showRiderConfirm" class="modal">
			<div class="modal-content">
				<h3>确认成为骑手</h3>
				<p>您确定要申请成为骑手吗？</p>
				<div class="modal-buttons">
					<button @click="applyToBeRider">确认</button>
					<button @click="showRiderConfirm = false">取消</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default {
		name: 'Mine',
		data() {
			return {
				user: {},
				islogin: false,
				isBusinessLogin: false, // 初始时假设商家未登录
				showRiderConfirm: false
			}
		},
		components: {
			Footer
		},
		created() {
			this.checkLoginStatus();
			this.user = this.$getSessionStorage('user');
			if (this.user != null) {
				this.islogin = true;
			}
			this.business = this.$getSessionStorage('business');
			    if (this.business != null) {
			        this.isBusinessLogin = true;
			    }
		},
		methods: {
			checkLoginStatus() {
			        const businessInfo = sessionStorage.getItem('business');
			        this.isBusinessLoggedIn = businessInfo ? true : false;
			    },
			tologin() {
				this.$router.push({
					path: '/login'
				});
			},
			toFoodAdmin() {
			    this.$router.push({ 
					path: '/foodadmin' ,
				});
			},
			toregister() {
				this.$router.push({
					path: '/register'
				});
			},
			topointsshop() {
				this.$router.push({
					path: '/pointsshop'
				});
			},
			toPointsdetails() {
				this.$router.push({
					path: '/pointsdetails'
				});
			},
			toquit() {
				this.$removeSessionStorage('user');
				this.user = null;
				this.islogin = false;
				this.$removeSessionStorage('business');
				this.business = null;
				this.isBusinessLogin = false;
				window.location.reload();
				// 可以添加其他清理逻辑或导航到适当的位置
			},
			toaddress() {
				this.$router.push({
					path: '/userAddress'
				});
			},
			toWallet() {
			    this.$router.push({
			      path: '/wallet',
			    });
			},
			handleRiderClick() {
				if (this.user.isRider == 1) {
					// 已经是骑手，跳转到骑手订单页面
					this.$router.push({
						path: '/riderorders'
					});
				} else {
					// 显示成为骑手确认弹窗
					this.showRiderConfirm = true;
				}
			},
			applyToBeRider() {
				// 这里调用API申请成为骑手
				// 假设有一个API调用成功后，更新用户状态
				this.$axios.put(`/UserController/updateAsRider/${this.user.userId}`,{},{headers: {
            'Content-Type': 'application/json'
          }
        })
					.then(response => {
						if(response.data.code > 0) {
							// 申请成功，更新本地用户信息

							this.user.isRider = 1;
							this.$setSessionStorage('user', this.user);
							alert('申请成功！');
							this.showRiderConfirm = false;
						} else {
							console.error(response.data.msg);
						}
					})


			}
		}
	};
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/******************头部******************/
	.wrapper .header {
		width: 100%;
		height: 25vw;
		background-color: #01B0F2;

		display: flex;
		align-items: center;

		border-radius: 0 0 3vw 3vw;
	}

	.wrapper .header img {
		width: 15vw;
		height: 15vw;
		border-radius: 50%;
		margin-left: 8vw;
	}

	.wrapper .header .login {
		display: flex;
		margin-bottom: 2vw;

		flex-direction: column;
	}

	.wrapper .header .login .box {
		display: flex;
		flex-direction: column;
	}

	.wrapper .header .login .box .line {
		display: flex;
	}


	.wrapper .header .login h2 {
		color: whitesmoke;
		margin-left: 4vw;
		margin-top: 3.5vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .header .login p {
		font-size: 2.8vw;
		color: whitesmoke;
		margin-left: 4vw;
		margin-top: 1vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .header .reset img {
		width: 8vw;
		height: 8vw;
		margin-left: 30vw;
	}

	/******************吃货豆部分******************/
	.wrapper .bean {
		width: 100%;
		height: 20vw;
		background-color: midnightblue;

		border-radius: 4vw 4vw 0 0;
		margin-top: 2vw;
		display: flex;
	}

	.wrapper .bean img {
		width: 6vw;
		height: 6vw;
		margin-top: 4vw;
		margin-left: 10vw;
	}

	.wrapper .bean .info {
		display: flex;
		flex-direction: column;
	}

	.wrapper .bean .info h2 {
		color: silver;
		font-weight: 350;
		margin-left: 2vw;
		margin-top: 4vw;
	}

	.wrapper .bean .info p {
		font-size: 3vw;
		color: silver;
		font-weight: 800;

		margin-top: 2vw;
	}

	.wrapper .bean .raise button {
		background-color: midnightblue;
		font-size: 4vw;
		margin-top: 6.5vw;
		margin-left: 35vw;
		color: bisque;
		border: none;
	}

	/******************详细信息部分******************/
	.wrapper .information {
		width: 100%;
	}

	.wrapper .information .money {
		border-bottom: solid 15px #e7e7e8;
	}

	.wrapper .information .cooperate {
		border-top: solid 15px #e7e7e8;
	}

	.wrapper .information li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		user-select: none;
		border-bottom: solid 3px #e7e7e8;
		padding-top: 2vw;
		display: flex;
		align-items: center;
	}

	.wrapper .information li img {
		width: 6vw;
		height: 6vw;
		margin-left: 5vw;
	}

	.wrapper .information li p {
		font-size: 4vw;
		margin-left: 5vw;
	}

	.wrapper .information li span {
		font-size: 30px;
		margin-left: 50vw;
		color: darkgrey;
	}

	.wrapper .information li div {
		display: flex;
		align-items: center;
	}

	.wrapper .quit {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6vw 0vw 20vw 0vw;
	}

	.wrapper .quit p {
		padding: 1.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 5vw;
		color: black;
		border-radius: 1vw;
		user-select: none;
		cursor: pointer;
		border: solid 2px #000000;
	}
	
	/* 弹窗样式 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}
	
	.modal-content {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		width: 80%;
		max-width: 400px;
		text-align: center;
	}
	
	.modal-buttons {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}
	
	.modal-buttons button {
		padding: 8px 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	
	.modal-buttons button:first-child {
		background-color: #01B0F2;
		color: white;
	}
	
	.modal-buttons button:last-child {
		background-color: #e7e7e8;
	}
</style>